前端程式設計筆記 (2026.4)

HTML / CSS / JS / AJAX / Python Flask 職訓課程筆記彙整&快速工具

GARY-KAO

第九章：Bootstrap Flex 排版與間距

本章節彙整 Bootstrap 中最常用的 Flexbox 通用類別與間距設定 (Spacing)，搭配響應式斷點 (如 md, lg)，能快速達成各種複雜排版而無須手寫 CSS。

1. 彈性容器方向 (Flex Direction)

外層容器需加上 d-flex，或在網格系統的 row 中直接使用：

  • flex-row：水平排列 (預設)。
  • flex-row-reverse：水平反向排列 (右至左)。
  • flex-column：垂直堆疊排列 (上至下，手機版常用)。
  • flex-column-reverse：垂直反向堆疊 (下至上)。

2. 主軸對齊 (Justify Content)

控制元素在「水平方向 (預設主軸)」的排列方式：

  • justify-content-start：靠左對齊 (預設)。
  • justify-content-center：水平置中。
  • justify-content-end：靠右對齊。
  • justify-content-around：平均分配空間，項目兩側的留白空間相等。
  • justify-content-between：平均分配空間，左右最外側項目會貼齊邊緣。

3. 交錯軸對齊 (Align Items & Align Self)

控制元素在「垂直方向」的排列方式：

  • align-items-center：外層控制，讓內部所有子元素垂直置中。
  • align-self-start / align-self-end：子元素控制，讓單一元素自己靠上或靠下對齊。

4. 響應式排序 (Order)

不更動 HTML 結構，透過 CSS 直接改變畫面的顯示順序。常結合斷點用於手機版與桌機版的順序切換：

  • 語法範例：order-1, order-md-3, order-xl-0 (數字越小排越前面，0 為最前)。
  • 實戰情境：手機版時希望圖片在上方 (order-0)，桌機版時希望圖片在右方 (order-lg-2)。

5. 自動推擠 (Auto Margins)

利用 auto margin 快速將特定元素推到容器的最邊緣，常用於導覽列把登入按鈕推到最右側：

  • 水平推擠： ms-auto (將元素往右推，margin-start)、me-auto (將元素往左推，margin-end)。
  • 垂直推擠： mt-auto (將元素往下推，margin-top)、mb-auto (將元素往上推，margin-bottom)。

6. 內外間距設定 (Spacing)

Bootstrap 提供 m (margin 外距) 與 p (padding 內距) 的快速縮寫格式，語法為：{屬性}{方向}-{大小}

  • 方向： t (上), b (下), s (左/start), e (右/end), x (水平左右), y (垂直上下)。
  • 大小： 提供 0 到 5 的級距 (例如：mt-3, px-5)，以及自動計算的 auto。

7. 實戰應用：互動式時間軸製作 (Timeline)

時間軸的核心技巧在於結合 Bootstrap 的 Flexbox 排版與 CSS 的「偽元素 (Pseudo-elements)」。

A. 核心思維解析

  • 交錯排列 (Flex-row-reverse)： 利用 Bootstrap 的網格分為左右各 6 欄 (col-md-6)。只要在偶數列加上 flex-row-reverse，就能在不更動 HTML 結構的情況下，讓圖文左右對調。
  • 繪製中線與節點 (偽元素)： 利用 CSS 的 ::before 在容器上「畫」出中間的橘色實線與圓形節點，避免在 HTML 寫入多餘的無意義標籤。
  • RWD 響應式優化： 在手機版 (768px 以下) 隱藏中線與節點，讓版面自動退化為乾淨的上下堆疊區塊。

B. CSS 樣式設定

請將這段時間軸專用的 CSS 加入到您網頁的 <style> 標籤內：

/* 圖片背景共用設定 */
.pimg {
    height: 260px;
    background-position: center center;
    background-size: cover;
}

/* 繪製時間軸中央的橘色貫穿線 */
.timeline-section {
    position: relative;
}
.timeline-section::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%; /* 定位在正中間 */
    transform: translateX(-50%);
    width: 3px;
    background-color: var(--secondary-color); /* 替換為您的主色變數 */
}

/* 繪製時間軸上的圓形節點 */
.timeline-section-pointer {
    position: relative;
}
.timeline-section-pointer::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 24px;
    background-color: #fff;
    border-radius: 50%;
    border: 6px solid var(--primary-color);
    transition: all 0.3s;
}

/* 滑鼠移入時放大節點的互動效果 */
.timeline-section-pointer:hover::before {
    width: 32px; height: 32px;
}

/* 手機版隱藏中線與節點 */
@media screen and (max-width: 768px) {
    .timeline-section::before, 
    .timeline-section-pointer::before {
        display: none;
    }
}

C. HTML 結構模板

這是一組（一左一右）的時間軸模板，您可以複製並替換圖片路徑與文字：

<div class="timeline-section py-5">
    
    <!-- 第一筆：圖在左，文在右 (預設) -->
    <div class="row align-items-center timeline-section-pointer mb-5">
        <div class="col-md-6">
            <div class="pimg" style="background-image: url(images/party000.jpg);"></div>
        </div>
        <div class="col-md-6 text-center mt-3 mt-md-0">
            <h3 class="mt-0">里程碑 001</h3>
            <p>這裡可以填寫專案介紹或是歷程說明...</p>
        </div>
    </div>

    <!-- 第二筆：圖在右，文在左 (加入 flex-row-reverse 反轉) -->
    <div class="row align-items-center flex-row-reverse timeline-section-pointer mb-5">
        <div class="col-md-6">
            <div class="pimg" style="background-image: url(images/party001.jpg);"></div>
        </div>
        <div class="col-md-6 text-center mt-3 mt-md-0">
            <h3 class="mt-0">里程碑 002</h3>
            <p>利用反轉排列創造交錯的視覺節奏感...</p>
        </div>
    </div>

</div>

第九章-補充：css遮罩hover與動畫

CSS 動畫與 :hover 狀態的結合，是提升網頁質感與使用者體驗（UX）的關鍵。透過簡單的語法，就能讓靜態元素產生生動的回饋。

1. 轉場動畫 (Transition) 的基礎

transition 用於平滑地改變 CSS 屬性，通常搭配 :hover 使用。它必須設定在元素原本的狀態（而不是 hover 狀態），這樣移入和移出時才都會有動畫效果。

  • 語法： transition: {要改變的屬性} {持續時間} {時間函數(速率)};
  • 範例： transition: all 0.6s ease-in-out; (所有屬性都在 0.6 秒內以「慢-快-慢」的速率平滑變化)。

2. 實用 Hover 特效解析

結合 transform (變形) 與 filter (濾鏡)，可以做出許多常見的視覺特效：

A. 圖片放大與亮度調整 (常搭配背景圖)

/* 原始狀態設定過渡效果 */
.bg-cover {
    transition: all 0.6s ease-in-out;
}

/* 滑鼠移入時觸發的改變 */
.bg-cover:hover {
    /* 濾鏡：提高亮度(brightness)與對比(contrast) */
    filter: brightness(1.15) contrast(1.1); 
    /* 變形：將元素放大 1.03 倍 */
    transform: scale(1.03); 
}

B. 卡片上浮效果

常用於商品卡片或功能區塊，讓使用者感覺元素被「拿起來」了。

.rollerbox {
    transition: transform 0.4s;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); /* 建議搭配陰影更有立體感 */
}

.rollerbox:hover {
    /* 同時 Y 軸往上移 5px 並微幅放大 */
    transform: translateY(-5px) scale(1.02); 
}

C. 漸層按鈕與光暈效果

.btn-custom {
    transition: all 0.4s;
}
.btn-custom:hover {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    box-shadow: 0 0 20px rgba(0, 114, 255, 0.7); /* 利用陰影創造發光感 */
}

3. 關鍵影格動畫 (@keyframes)

對於一進入網頁就要自動播放，或是比簡單 hover 更複雜的多段式動畫，就需要使用 @keyframes 定義動畫腳本，再透過 animation 屬性呼叫。

A. 定義動畫腳本

利用 0% (起點) 到 100% (終點) 設定 CSS 狀態。例如一個淡入並微微放大的效果：

@keyframes fadeIn {
    0% {
        opacity: 0; /* 起始全透明 */
        transform: scale(0.95); /* 起始稍微縮小 */
    }
    100% {
        opacity: 1; /* 終點不透明 */
        transform: scale(1); /* 終點恢復原始大小 */
    }
}

B. 呼叫動畫

在目標元素上使用 animation 屬性來播放腳本：

.display-title {
    /* 播放 fadeIn 動畫，持續 2 秒，速率 ease-in-out */
    animation: fadeIn 2s ease-in-out;
}
💡 進階技巧：動畫停留
若動畫執行完畢後，元素又恢復到 0% 的原始狀態，可以加上 forwards 參數。
範例：animation: fadeInUp 1.2s ease forwards; (動畫結束後，停留在 100% 的狀態)。